import React, { useState } from 'react';
import _ from 'lodash';
import { uniqueId } from '../utils/uniqueId';
import { Drawer, Button, Input, InputNumber, Divider, Radio, Select, Row, Col, Modal, List, Typography, message } from 'antd';
const { Option } = Select;


const { Title, Text } = Typography;


//数学区间表示法的正则表达式
const rangeRegex=/^((\[)|(\())(((\-|\+)?\d+(\.\d+)?)|(-Inf)),(((\-|\+)?\d+(\.\d+)?)|(Inf))((\])|(\)))$/;

//分数选择项属性编辑器
const ScoreInputItemsAttrComponent = (props) => {

    const { node, attr, onChange } = props;

    const [dg, setDg] = useState({
        opened: false,
        type: 'none',
        data: {},
        index: -1
    });

    const [itemsDg, setItemsDg] = useState({
        opend: false
    });

    //const { opts = [] } = attr;
    const items = _.get(node.attrs, attr.path, []);

    const height = "30px";

    return <> <Modal
        maskClosable={false}
        title="编辑计分项"
        visible={dg.opened}
        okText="确认"
        cancelText="取消"
        onOk={() => {


            //验证

            if ((dg.data.numRange || "").trim() == "") {
                message.warning('数值区间必填');
                return;
            }

            //验证区间字符串是否合法
            if(!rangeRegex.test(dg.data.numRange)){
                message.warning('请填写正确的数学区间字符串');
                return;
            }

            //console.log(dg.data.score, 'dg.data.score')

            if ((dg.data.score === null) ||
                (dg.data.score === undefined)) {
                message.warning('分数必填');
                return;
            }

            if ((dg.data.score !== null) &&
                (dg.data.score !== undefined) &&
                dg.data.score.toString().trim() === "") {
                message.warning('分数必填');
                return;
            }



            if (dg.type == 'add') {
                let newItems = [...items,{ id: uniqueId(), ..._.cloneDeep(dg.data) }];
                _.set(node.attrs, attr.path, newItems);
                onChange(attr.path, newItems);
            } else if (dg.type == 'update') {
                let newItems = _.cloneDeep(items);
                let newItem = (newItems[dg.index] || {});
                newItem.numRange = dg.data.numRange;
                newItem.score = dg.data.score;
                _.set(node.attrs, attr.path, newItems);
                onChange(attr.path, newItems);
            }

            setDg({
                opened: false,
                type: 'none',
                data: {},
                index: -1
            });
        }}
        onCancel={() => {
            setDg({
                opened: false,
                type: 'none',
                data: {},
                index: -1
            });
        }}
    >
        <Input.Group compact style={{ display: 'flex', alignItems: 'center' }}>
            <Text style={{ width: '35%', textAlign: 'right', paddingRight: '15px' }}>
                {`数值区间(如: `}<Text style={{color:'red'}}>[0,100)</Text>{` ):`}
            </Text>
            <Input style={{ height: height, width: '60%' }} value={dg.data.numRange} onChange={(e) => {
                let copy = _.cloneDeep(dg);
                copy.data.numRange = e.target.value;
                setDg(copy);
            }}></Input>
            <Text style={{ width: '5%', textAlign: 'center', color: 'red' }}>*</Text>
        </Input.Group>
        <Input.Group compact style={{ marginTop: '20px', display: 'flex', alignItems: 'center' }}>
            <Text style={{ width: '35%', textAlign: 'right', paddingRight: '15px' }}>
                {`得分:`}
            </Text>
            <InputNumber min={0} max={100} style={{ height: height, width: '60%' }} value={dg.data.score} onChange={(value) => {
                let copy = _.cloneDeep(dg);
                copy.data.score = value;
                setDg(copy);
            }}></InputNumber>
            <Text style={{ width: '5%', textAlign: 'center', color: 'red' }}>*</Text>
        </Input.Group>
    </Modal>

        <Modal
            maskClosable={false}
            visible={itemsDg.opend}
            onCancel={() => {
                setItemsDg({
                    opend: false
                });
            }}
            footer={[
                <Button key={uniqueId()} type="primary" onClick={() => {
                    setItemsDg({
                        opend: false
                    });
                }}>
                    关闭
                </Button>,
            ]}>

            <List
                header={<div>
                    <Button onClick={() => {
                        setDg({
                            opened: true,
                            type: 'add',
                            data: {},
                            index: -1
                        });
                        // let newItems = [1, ...items];
                        // _.set(node.attrs, attr.path, newItems);
                        // onChange(attr.path, newItems);
                    }}>新增</Button>
                </div>}
                footer={<div></div>}
                dataSource={items}
                bordered
                renderItem={(item, index) => {
                    return <List.Item key={index}>
                        <div>
                            <span>{item.numRange}:{item.score}</span>
                            <Button onClick={() => {

                                //console.log(index,'index');

                                setDg({
                                    opened: true,
                                    type: 'update',
                                    data: _.cloneDeep(item),
                                    index: index
                                });


                            }}>修改</Button>
                            <Button onClick={() => {

                                //console.log(index,'index')
                                let newItems = _.cloneDeep(items);
                                newItems.splice(index, 1);
                                console.log(newItems);
                                _.set(node.attrs, attr.path, newItems);
                                onChange(attr.path, newItems);

                            }}>删除</Button>
                        </div>
                    </List.Item>
                }}
            />

        </Modal>

        <Row>
            <Col flex="80px">{attr.label}:</Col>
            <Col flex="auto">
                <Button onClick={() => {
                    setItemsDg({ opend: true });
                }}>编辑</Button>
            </Col>
        </Row></>
}

export default ScoreInputItemsAttrComponent;